<template>
  <view class="invoice-page">
    <!-- 发票类型选择 -->
    <view class="section">
      <view class="section-title">发票类型</view>
      <view class="invoice-type">
        <view 
          class="type-item" 
          :class="{ active: invoiceType === 'personal' }"
          @tap="invoiceType = 'personal'"
        >
          <text>个人发票</text>
        </view>
        <view 
          class="type-item" 
          :class="{ active: invoiceType === 'company' }"
          @tap="invoiceType = 'company'"
        >
          <text>企业发票</text>
        </view>
      </view>
    </view>

    <!-- 已支付订单列表 -->
    <view class="section">
      <view class="section-title">选择订单（可选）</view>
      <view class="order-list">
        <view 
          class="order-item" 
          v-for="order in paidOrders" 
          :key="order.id"
          :class="{ active: selectedOrder && selectedOrder.id === order.id }"
          @tap="selectOrder(order)"
        >
          <view class="order-info">
            <text class="order-number">订单号: {{ order.orderNumber }}</text>
            <text class="order-date">{{ order.date }}</text>
          </view>
          <view class="order-amount">¥{{ order.amount }}</view>
        </view>
        <view v-if="paidOrders.length === 0" class="empty-tip">暂无可开票订单</view>
      </view>
    </view>

    <!-- 发票信息 -->
    <view class="section">
      <view class="section-title">发票信息</view>
      <view class="form-item">
        <text class="label">发票抬头</text>
        <input 
          class="input" 
          v-model="invoiceInfo.title" 
          :placeholder="invoiceType === 'personal' ? '请输入个人姓名' : '请输入企业名称'"
        />
      </view>
      <view class="form-item" v-if="invoiceType === 'company'">
        <text class="label">税号</text>
        <input 
          class="input" 
          v-model="invoiceInfo.taxNumber" 
          placeholder="请输入纳税人识别号"
        />
      </view>
      <view class="form-item">
        <text class="label">邮箱</text>
        <input 
          class="input" 
          v-model="invoiceInfo.email" 
          placeholder="请输入接收发票的邮箱"
        />
      </view>
    </view>

    <!-- 发票金额 -->
    <view class="section">
      <view class="section-title">发票金额</view>
      <view class="amount-info">
        <text class="amount-label">可开票金额</text>
        <text class="amount-value">¥{{ availableAmount }}</text>
      </view>
      <view class="form-item">
        <text class="label">开票金额</text>
        <input 
          class="input" 
          type="digit"
          v-model="invoiceInfo.amount" 
          placeholder="请输入开票金额"
        />
      </view>
    </view>

    <!-- 提交按钮 -->
    <view class="submit-section">
      <button class="submit-btn" @tap="handleSubmit">提交开票申请</button>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'

// 发票类型
const invoiceType = ref('personal')

// 可开票金额
const availableAmount = ref(0)

// 发票信息
const invoiceInfo = reactive({
  title: '',
  taxNumber: '',
  email: '',
  amount: ''
})

// 已支付订单列表
const paidOrders = ref([])

// 当前选中的订单
const selectedOrder = ref(null)

// 获取可开票金额
const getAvailableAmount = async () => {
  // TODO: 调用API获取可开票金额
  availableAmount.value = 1000 // 示例数据
}

// 获取已支付订单列表
const getPaidOrders = async () => {
  // TODO: 调用API获取可开票订单列表
  // 示例数据
  paidOrders.value = [
    { id: 1, orderNumber: 'ORDER20231201001', date: '2023-12-01', amount: 150.00 },
    { id: 2, orderNumber: 'ORDER20231115005', date: '2023-11-15', amount: 88.50 },
    { id: 3, orderNumber: 'ORDER20231110020', date: '2023-11-10', amount: 220.00 }
  ]
}

// 选择订单
const selectOrder = (order) => {
  if (selectedOrder.value && selectedOrder.value.id === order.id) {
    // 取消选择
    selectedOrder.value = null
    invoiceInfo.amount = '' // 清空金额
  } else {
    selectedOrder.value = order
    invoiceInfo.amount = order.amount // 将订单金额填充到发票金额输入框
    // 你也可以在这里填充其他信息，比如如果订单有用户名称，可以填充到发票抬头 (如果发票类型是个人)
    // if (invoiceType.value === 'personal' && order.userName) {
    //   invoiceInfo.title = order.userName
    // }
  }
}

// 提交开票申请
const handleSubmit = async () => {
  // 表单验证
  if (!invoiceInfo.title) {
    uni.showToast({
      title: '请输入发票抬头',
      icon: 'none'
    })
    return
  }
  if (invoiceType.value === 'company' && !invoiceInfo.taxNumber) {
    uni.showToast({
      title: '请输入税号',
      icon: 'none'
    })
    return
  }
  if (!invoiceInfo.email) {
    uni.showToast({
      title: '请输入邮箱',
      icon: 'none'
    })
    return
  }
  if (!invoiceInfo.amount) {
    uni.showToast({
      title: '请输入开票金额',
      icon: 'none'
    })
    return
  }

  // TODO: 调用API提交开票申请
  try {
    // const res = await submitInvoice({
    //   type: invoiceType.value,
    //   ...invoiceInfo
    // })
    uni.showToast({
      title: '提交成功',
      icon: 'success'
    })
    // 返回上一页
    setTimeout(() => {
      uni.navigateBack()
    }, 1500)
  } catch (error) {
    uni.showToast({
      title: '提交失败，请重试',
      icon: 'none'
    })
  }
}

// 页面加载时获取数据
onMounted(() => {
  getAvailableAmount()
  getPaidOrders() // 添加获取订单列表
})
</script>

<style lang="scss" scoped>
.invoice-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 32rpx;
}

.section {
  background: #fff;
  margin: 24rpx;
  padding: 32rpx;
  border-radius: 16rpx;

  .section-title {
    font-size: 32rpx;
    color: #333;
    font-weight: 600;
    margin-bottom: 24rpx;
  }
}

.invoice-type {
  display: flex;
  gap: 24rpx;

  .type-item {
    flex: 1;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border-radius: 8rpx;
    font-size: 28rpx;
    color: #666;
    transition: all 0.3s;

    &.active {
      background: #06C05F;
      color: #fff;
    }
  }
}

.form-item {
  margin-bottom: 24rpx;

  &:last-child {
    margin-bottom: 0;
  }

  .label {
    display: block;
    font-size: 28rpx;
    color: #333;
    margin-bottom: 12rpx;
  }

  .input {
    width: 100%;
    height: 88rpx;
    background: #f5f5f5;
    border-radius: 8rpx;
    padding: 0 24rpx;
    font-size: 28rpx;
    color: #333;
  }
}

.amount-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24rpx;
  padding: 24rpx;
  background: #f5f5f5;
  border-radius: 8rpx;

  .amount-label {
    font-size: 28rpx;
    color: #666;
  }

  .amount-value {
    font-size: 36rpx;
    color: #06C05F;
    font-weight: 600;
  }
}

.submit-section {
  padding: 48rpx 24rpx;

  .submit-btn {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    background: #06C05F;
    color: #fff;
    font-size: 32rpx;
    border-radius: 44rpx;
    text-align: center;

    &:active {
      opacity: 0.9;
    }
  }
}

.order-list {
  .order-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx;
    border-bottom: 1rpx solid #eee;
    background: #f9f9f9;
    margin-bottom: 8rpx;
    border-radius: 8rpx;
    transition: background-color 0.3s;

    &:last-child {
      border-bottom: none;
    }

    &.active {
      background: #e0f2e9; // 选中状态的背景色
    }

    .order-info {
      display: flex;
      flex-direction: column;

      .order-number {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 8rpx;
      }

      .order-date {
        font-size: 24rpx;
        color: #999;
      }
    }

    .order-amount {
      font-size: 32rpx;
      color: #06C05F;
      font-weight: 600;
    }
  }
  
  .empty-tip {
    text-align: center;
    padding: 32rpx;
    color: #999;
    font-size: 28rpx;
  }
}
</style> 